<template>
	<div class="flexDix">
		<div class="groupContent leftContent">
			<div class="searchBox">
				<span class="searchText">优惠分组名称:</span><input type="text" class="searchInput groupName" placeholder="请输入优惠分组名称" v-model="discountGroupName">
				<span class="searchText">地域:</span>
				<el-cascader :options="options" v-model="city" clearable></el-cascader>
				<div class="searchBut"  @click="searchGroupList"><img src="~_assets/search.png" class="foundPic" />搜索</div>
			</div>
			<div class="tableBox">
				<div class="playBox">
					<div class="butInfoMes add" @click="addGroup(1)">添加</div>
					<div :class="[one,{'edit':classa,'gray':classb}]" @click="addGroup(2)">修改</div>
					<div :class="[one,{'delete':classa,'gray':classb}]" @click="deleteGroup">删除</div>
				</div>
				<div class="contentTable">
					<div v-if="searchType == 1">
					<img src="~_assets/fail.png" class="searchResult">
					</div>
					<div v-else-if="searchType == 2">
						<img src="~_assets/nosearch.png" class="searchResult">
					</div>
					<bootstrap-table v-else :my_columns="my_columns" :my_data="data1" :my_options="my_options" @item="getItem" ref="table1"></bootstrap-table>
				</div>
			</div>
		</div>
		<div class="groupContent rightContent" v-show="isShowRight">
			<div class="searchBox">
				<span class="searchText">车牌号:</span><input type="text" class="searchInput" placeholder="请输入车牌号" v-model="carNumber" maxlength="9">
				<span class="searchText">手机号:</span><input type="text" class="searchInput" placeholder="请输入手机号" v-model="phoneNumber" maxlength="11">
				<div class="searchBut" @click="searchRoleList"><img src="~_assets/search.png" class="foundPic" />搜索</div>
			</div>
			<div class="tableBox">
				<div class="playBox">
					<div :class="[one,{'add':classa,'gray':classb}]" @click="addRole(1)">添加</div>
					<div :class="[one,{'edit':classc,'gray':classd}]" @click="addRole(2)">修改</div>
					<div :class="[one,{'delete':classc,'gray':classd}]" @click="deleteRole">删除</div>
					<div :class="[one,{'export':classa,'gray':classb}]" @click="exportDown">导入</div>
				</div>
				<div class="contentTable">
					<div v-if="searchType == 1">
					<img src="~_assets/fail.png" class="searchResult">
					</div>
					<div v-else-if="searchType == 2">
						<img src="~_assets/nosearch.png" class="searchResult">
					</div>
					<bootstrap-table v-else :my_columns="my_columns1" :my_data="data2" :my_options="my_options1" @item="roleItem" ref="table2"></bootstrap-table>
				</div>
			</div>
		</div>
		<div v-if="showAddGroupDiv">
			<AddGroup @closeGroup='closeGroup' :items="trData" :showTittle="tittle" :groupItem="groupDetail"></AddGroup>
		</div>
		<div v-if="showAddRolesDiv">
			<AddRoles @closeAlert='closeAlert' :items="trData" :roleItem="roleTr" :showRoleTittle="roleTittle" :rolesItem="roleDetail"></AddRoles>
		</div>
		<div v-show="showExportDiv">
			<Export @closeExport='closeExport' :items="trData"></Export>
		</div>
		<div v-show="showDeleteGroup">
			<div class="alertBox deleteBox">
				<div class="alertBk"></div>
				<div class="wordBox">
					<div class="alertHead">
						<p class="tittle">删除</p>
						<div class="myClose" @click="closeDeleteGroup">
							<img src="~_assets/close.png" class="myClose"/>
						</div>
					</div>
					<div class="alertBody">
						<div class="changeDiv">
							<p class="deleteTip">删除分组后,组内会员信息也将删除</p>
						</div>
						<div class="alertBut">
							<button class="isFalse" @click="closeDeleteGroup">取消</button>
							<button class="isTrue" @click="deleteGroupIsTrue">确认</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-show="showDeleteRole">
			<div class="alertBox deleteRoleBox">
				<div class="alertBk"></div>
				<div class="wordBox">
					<div class="alertHead">
						<p class="tittle">删除</p>
						<div class="myClose" @click="closeDeleteRole">
							<img src="~_assets/close.png" class="myClose"/>
						</div>
					</div>
					<div class="alertBody">
						<div class="changeDiv">
							<p class="deleteTip">确认删除所选条目?</p>
						</div>
						<div class="alertBut">
							<button class="isFalse" @click="closeDeleteRole">取消</button>
							<button class="isTrue" @click="deleteRoleIsTrue">确认</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import AddGroup from "./children/AddGroup";
import AddRoles from "./children/AddRoles";
import Export from "./children/Export";
import { area } from "_config/common.js";
import {
  FIND_BY_PARAM_GROUPING,
  DELETE_BYID_GROUPING,
  FIND_BY_PARAM_GROUPING_MEMBERS,
  DELETE_BYID_GROUPING_MEMBERS,
  FIND_BYID_GROUPING,
  FIND_BYID_GROUPING_MEMBERS
} from "@/config/url";
export default {
  components: {
    AddGroup,
    AddRoles,
    Export
  },
  mounted() {
    this.searchGroupList();
  },
  data() {
    return {
      one: "butInfoMes",
      classa: false,
      classb: true,
      classc: false,
      classd: true,
      searchType: "12",
      options: area,
      city: [], //省市区
      showAddGroupDiv: false,
      showAddRolesDiv: false,
      showExportDiv: false,
      showDeleteGroup: false,
      showDeleteRole: false,
      discountGroupName: "", //分组名称
      carNumber: "", //车牌号
      phoneNumber: "", //手机号
      isShowRight: false,
      trData: "",
      roleTr: "",
      tittle: "",
      roleTittle: "",
      page: 1,
      size: 10,
      my_columns: [
        {
          title: "序号",
          field: "",
          formatter: function(i, row, index) {
            return index + 1;
          }
        },
        {
          title: "优惠分组名称",
          field: "discountGroupName",
          formatter: function(i, row, index) {
            return i;
          }
        },
        {
          title: "地域",
          field: "provinceName"
        }
      ],
      my_columns1: [
        {
          title: "序号",
          field: "",
          formatter: function(i, row, index) {
            return index + 1;
          }
        },
        {
          title: "手机号",
          field: "preferentialPhone"
        },
        {
          title: "车牌号",
          field: "preferentialCarNumber"
        }
      ],
      data1: [],
      data2: [],
      groupDetail: "",
      roleDetail: "",
      my_options: {},
      my_options1: {},
      config: {
        checkbox_rows: true,
        rows_selectable: true,
        card_title: "Vue Bootsrap 4 advanced table"
      }
    };
  },
  methods: {
    getItem(data) {
      if (data && data.id) {
        this.classa = true;
        this.classb = false;
        this.trData = data;
        this.searchRoleList();
        this.isShowRight = true;
      }
    },
    roleItem(data) {
      if (data && data.id) {
        this.classc = true;
        this.classd = false;
        this.roleTr = data;
      }
    },
    // 新建,修改分组
    addGroup(type) {
      this.tittle = type;
      let that = this;
      if (this.tittle == 2) {
        this.$fetch(FIND_BYID_GROUPING, {
          groupId: this.trData.id
        }).then(
          res => {
            that.groupDetail = res.data;
            this.showAddGroupDiv = true;
          },
          err => {}
        );
      } else {
        that.groupDetail = "";
        this.showAddGroupDiv = true;
      }
    },
    closeGroup() {
      this.showAddGroupDiv = false;
    },
    // 新建,修改用户
    addRole(type) {
      this.roleTittle = type;
      let that = this;
      if (this.roleTittle == 2) {
        this.$fetch(FIND_BYID_GROUPING_MEMBERS, {
          groupMemberId: this.roleTr.id
        }).then(
          res => {
            that.roleDetail = res.data;
            this.showAddRolesDiv = true;
          },
          err => {}
        );
      } else {
        that.roleDetail = "";
        this.showAddRolesDiv = true;
      }
    },
    closeAlert() {
      this.showAddRolesDiv = false;
    },
    exportDown() {
      this.showExportDiv = true;
    },
    closeExport() {
      this.showExportDiv = false;
    },
    // 查询分组列表
    searchGroupList() {
      this.my_options = {
        pagination: true,
        sidePagination: "server",
        url: FIND_BY_PARAM_GROUPING,
        queryParams: this.getParams
      };
    },
    getParams() {
      this.classb = true;
      this.isShowRight = false;
      let param = {
        discountGroupName: this.discountGroupName,
        province: this.city[0],
        city: this.city[1],
        area: this.city[2],
        page: this.$refs.table1.local.options.pageNumber,
        size: this.$refs.table1.local.options.pageSize
      };
      return param;
    },
    // 删除分组
    deleteGroup() {
      this.showDeleteGroup = true;
    },
    closeDeleteGroup() {
      this.showDeleteGroup = false;
    },
    deleteGroupIsTrue() {
      this.$fetch(DELETE_BYID_GROUPING, {
        groupId: this.trData.id
      }).then(
        res => {
          this.$message({
            showClose: true,
            type: "success",
            message: res.data
          });
          this.searchGroupList();
          this.showDeleteGroup = false;
        },
        err => {
          this.$message({
            showClose: true,
            type: "warning",
            message: "网络异常,请稍后再试!"
          });
        }
      );
    },
    // 查询用户列表
    searchRoleList() {
      this.my_options1 = {
        pagination: true,
        sidePagination: "server",
        url: FIND_BY_PARAM_GROUPING_MEMBERS,
        queryParams: this.getParams1
      };
    },
    getParams1() {
      this.classd = true;
      let param = {
        carNumber: this.carNumber,
        groupingId: this.trData.id,
        phone: this.phoneNumber,
        page: this.$refs.table2.local.options.pageNumber,
        size: this.$refs.table2.local.options.pageSize
      };
      return param;
    },
    // 删除用户
    deleteRole() {
      this.showDeleteRole = true;
    },
    closeDeleteRole() {
      this.showDeleteRole = false;
    },
    deleteRoleIsTrue() {
      this.$fetch(DELETE_BYID_GROUPING_MEMBERS, {
        groupMemberId: this.roleTr.id
      }).then(
        res => {
          this.$message({
            showClose: true,
            type: "success",
            message: "删除成功!"
          });
          this.searchRoleList();
          this.showDeleteRole = false;
        },
        err => {
          this.$message({
            showClose: true,
            type: "warning",
            message: "网络异常,请稍后再试!"
          });
        }
      );
    }
  }
};
</script>

<style lang="less">
.flexDix {
  display: flex;
}

.groupContent {
  height: 88%;
  background: #fff;
  position: fixed;
  right: 0;
  top: 0.7rem;
}

.leftContent {
  width: 50%;
  left: 1.48rem;
  box-shadow: -1px 12px 71px 10px rgba(230, 247, 252, 0.5);
}

.rightContent {
  width: 34.6%;
  margin-top: 0.03rem;
  box-shadow: -1px 12px 91px -10px rgba(230, 247, 252, 0.5);
  .searchInput {
    width: 0.8rem;
  }
}

.groupName {
  width: 1.5rem;
}

.el-cascader {
  margin-right: 0.1rem;
  margin-left: 0.04rem;
}

.el-cascader .el-input--suffix .el-input__inner {
  height: 0.16rem;
  border-radius: 8px;
  padding-left: 0.08rem;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(181, 194, 202, 1);
  margin-right: 0.1rem;
  margin-left: 0.04rem;
  padding-right: 0.2rem;
}

.contentTable {
  width: 99%;
}

.bootstrap-table {
  padding-top: 0;
}
.deleteTip {
  color: #333;
}
.deleteBox {
  .wordBox {
    width: 24%;
  }
  .changeDiv {
    width: 50%;
  }
}
.deleteRoleBox {
  .wordBox {
    width: 24%;
  }
  .changeDiv {
    width: 30%;
  }
}
</style>